<template>
	<view class="nav flex justify-between align-center">
		<view>
			<slot name="left"></slot>
		</view>
		
		<view class="btn_group">
			<view class="left" size="mini" :class="activeButton == leftButton?'active':''" @tap="handleSelect('left')">{{leftButton}}</view>
			<view class="right" size="mini" :class="activeButton == rightButton?'active':''" @tap="handleSelect('right')">{{rightButton}}</view>
		</view>
		
		<view>
			<slot name="right"></slot>
		</view>

	</view>
</template>

<script>
	export default {
		props: {
			leftButton: {//左边按钮内容
				type: String,
				default: ''
			},
			rightButton: {//右边按钮内容
				type: String,
				default: ''
			},
			activeButton:{ //当前选中的按钮，传入按钮显示的名字
				type: String,
				default: ''
			}
		},
		data() {
			return {

			}
		},
		methods: {
			handleSelect(type){
				this.$emit('changeBtn',type)
			}
		}
	}
</script>

<style lang="scss">
	.nav {
		background-color: #FFFFFF;
		width: 100%;
		height: 80rpx;
		padding-left: 30rpx;
		padding-right: 30rpx;
		font-family: PingFang SC;
	}

	.btn_group {
		display: flex;
		justify-content: center;
		align-items: center;
		// border: 2rpx solid #FFFFFF !important;
		overflow: hidden;
		border-radius: 8rpx;
		height: 54rpx;
		width: 320rpx;
		.left {
			flex: 1;
			text-align: center;
			height: 100%;
			line-height: 50rpx;
			color: #8B8F95;
			border: 2rpx solid #FFFFFF;
			border-radius: 8rpx 0 0 8rpx;
		}
		.right {
			flex: 1;
			text-align: center;
			height: 100%;
			color: #8B8F95;
			line-height: 50rpx;
			border: 2rpx solid #FFFFFF;
			border-radius: 0 8rpx 8rpx 0;
		}
		.active{
			background-color: #8B8F95;
			color: #262E40;
			font-size: 28rpx
		}
	}
</style>
